{% liquid
  case desktop_columns_per_row
    when '5'
      assign desktop_columns_per_row = 'row-cols-lg-5'
    when '6'
      assign desktop_columns_per_row = 'row-cols-lg-6'
  endcase

  # Check if current link matches any mega menu block's menu_item
  assign is_mega_menu = false
  assign is_mega_menu_with_images = false
  assign mega_menu_blocks = section.blocks | where: "type", "mega_menu"
  assign mega_menu_with_images_blocks = section.blocks | where: "type", "mega_menu_with_images"
  
  # First check mega menu blocks
  for block in mega_menu_blocks
    if block.settings.menu_item == link.title
      assign is_mega_menu = true
      assign current_mega_menu = block
      break
    endif
  endfor

  # Then check mega menu with images blocks
  if is_mega_menu == false
    for block in mega_menu_with_images_blocks
      if block.settings.menu_item == link.title
        assign is_mega_menu_with_images = true
        assign current_mega_menu = block
        break
      endif
    endfor
  endif
%}

{% if is_mega_menu %}
  {% comment %} Desktop Mega Menu Implementation {% endcomment %}
  <div aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="as-dropdown-menu mega-menu-dropdown border-0 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center">
  <div class="d-none d-lg-block d-xl-block">
    <div aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="as-dropdown-menu mega-menu-dropdown border-0 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center">
      <div class="container">
        <div class="row py-4">
          <div class="col-12">
            <div class="row">
              {% comment %} Product Categories Column with Child Links {% endcomment %}
              <div class="col-6 category-group-wrapper">
                <div class="mega-menu-category">
                  {% comment %} First level categories {% endcomment %}
                  {% for child in link.links %}
                    <div class="category-group mb-4">
                      <div class="parent-link mb-2">
                        <a href="{{ child.url }}" class="text-decoration-none">{{ child.title }}</a>
                      </div>
                      {% if child.links.size > 0 %}
                        <ul class="list-unstyled child-links">
                          {% for grandchild in child.links %}
                            <li class="mb-2">
                              <a href="{{ grandchild.url }}" class="text-decoration-none">{{ grandchild.title }}</a>
                            </li>
                          {% endfor %}
                        </ul>
                      {% endif %}
                    </div>
                  {% endfor %}
                </div>
              </div>

              {% comment %} Promotional Images Column {% endcomment %}
              <div class="promo-wrapper col-6">
                <div class="extended-promo-wrapper row g-4">
                  {% if current_mega_menu.settings.img != blank %}
                    <div class="extended-promo-item col-6">
                      <a href="{{ current_mega_menu.settings.link }}" class="text-decoration-none">
                        <div class="ratio ratio-16x9">
                          <img 
                            src="{{ current_mega_menu.settings.img | img_url: 'master' }}"
                            alt="{{ current_mega_menu.settings.text }}"
                            class="object-fit-cover rounded"
                            width="auto"
                            height="auto"
                            loading="lazy"
                          >
                        </div>
                        {% if current_mega_menu.settings.text != blank %}
                          <p class="mt-2 mb-0 text-center">{{ current_mega_menu.settings.text }}</p>
                        {% endif %}
                      </a>
                    </div>
                  {% endif %}
                  
                  {% if current_mega_menu.settings.img_2 != blank %}
                    <div class="extended-promo-item col-6">
                      <a href="{{ current_mega_menu.settings.link_2 }}" class="text-decoration-none">
                        <div class="ratio ratio-16x9">
                          <img 
                            src="{{ current_mega_menu.settings.img_2 | img_url: 'master' }}"
                            alt="{{ current_mega_menu.settings.text_2 }}"
                            class="object-fit-cover rounded"
                            width="auto"
                            height="auto"
                            loading="lazy"
                          >
                        </div>
                        {% if current_mega_menu.settings.text_2 != blank %}
                          <p class="mt-2 mb-0 text-center">{{ current_mega_menu.settings.text_2 }}</p>
                        {% endif %}
                      </a>
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% comment %} Mobile Mega Menu Implementation {% endcomment %}
  <div class="d-block d-lg-none d-xl-none">
    <div aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="as-dropdown-menu regular-dropdown dropdown-menu {{ background_color }}">
      <ul class="list-unstyled mb-0">
        {% for child in link.links %}
          <li class="dropdown-item-wrapper">
            {% if child.links.size > 0 %}
              <div class="nested-dropdown">
                <button type="button" class="dropdown-item d-flex align-items-center justify-content-between w-100 border-0 bg-transparent" data-bs-toggle="collapse" data-bs-target="#submenu-mega-{{ forloop.index }}-{{ child.handle }}" aria-expanded="false">
                  {{ child.title }}
                  <span class="dropdown-icon">
                    {% render 'icon-chevron-down-header' %}
                  </span>
                </button>
                <div id="submenu-mega-{{ forloop.index }}-{{ child.handle }}" class="collapse">
                  <ul class="list-unstyled mb-0">
                    {% for grandchild in child.links %}
                      <li>
                        <a href="{{ grandchild.url }}" class="dropdown-item">{{ grandchild.title }}</a>
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              </div>
            {% else %}
              <a href="{{ child.url }}" class="dropdown-item">{{ child.title }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ul>

      {% comment %} Mobile Promotional Images {% endcomment %}
      {% if current_mega_menu.settings.img != blank or current_mega_menu.settings.img_2 != blank %}
        <div class="promo-wrapper-mobile pt-3">
          {% if current_mega_menu.settings.img != blank %}
            <div class="promo-item-mobile mb-3">
              <a href="{{ current_mega_menu.settings.link }}" class="text-decoration-none">
                <div class="ratio ratio-16x9">
                  <img 
                    src="{{ current_mega_menu.settings.img | img_url: 'master' }}"
                    alt="{{ current_mega_menu.settings.text }}"
                    class="object-fit-cover rounded"
                    width="auto"
                    height="auto"
                    loading="lazy"
                  >
                </div>
                {% if current_mega_menu.settings.text != blank %}
                  <p class="mt-2 mb-0">{{ current_mega_menu.settings.text }}</p>
                {% endif %}
              </a>
            </div>
          {% endif %}
          
          {% if current_mega_menu.settings.img_2 != blank %}
            <div class="promo-item-mobile">
              <a href="{{ current_mega_menu.settings.link_2 }}" class="text-decoration-none">
                <div class="ratio ratio-16x9">
                  <img 
                    src="{{ current_mega_menu.settings.img_2 | img_url: 'master' }}"
                    alt="{{ current_mega_menu.settings.text_2 }}"
                    class="object-fit-cover rounded"
                    width="auto"
                    height="auto"
                    loading="lazy"
                  >
                </div>
                {% if current_mega_menu.settings.text_2 != blank %}
                  <p class="mt-2 mb-0">{{ current_mega_menu.settings.text_2 }}</p>
                {% endif %}
              </a>
            </div>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
  </div>
{% elsif is_mega_menu_with_images %}
  {% comment %} Mega Menu with Images Implementation {% endcomment %}
  <div aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="as-dropdown-menu mega-menu-dropdown mega-menu-with-images border-0 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center">
    <div class="container">
      <div class="row pt-0 pt-md-4">
        <div class="col-12 category-image-wrapper-outer-container">
          {% comment %} Category Images Row with First Child Links {% endcomment %}
          <div class="row g-4 mb-4 category-image-wrapper-outer">
            {% for child in link.links %}
              {% assign index = forloop.index %}
              {% assign image_key = 'category_' | append: index | append: '_image' %}
              {% assign link_key = 'category_' | append: index | append: '_link' %}
              {% assign image = current_mega_menu.settings[image_key] %}
              
              <div class="col-6 col-lg-3 col-xl-3 category-image-wrapper-inner">
                <div class="category-image-wrapper">
                  {% if image != blank %}
                    <a href="{{ child.url }}" class="category-image-link text-decoration-none">
                      <div class="ratio ratio-1x1">
                        <img 
                          src="{{ image | img_url: 'master' }}"
                          alt="{{ child.title }}"
                          class="object-fit-cover rounded"
                          width="auto"
                          height="auto"
                          loading="lazy"
                        >
                      </div>
                    </a>
                  {% endif %}
                  <div class="category-title text-center mt-3">
                    <a href="{{ child.url }}" class="text-decoration-none">{{ child.title }}</a>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>

          {% comment %} Menu Categories Row {% endcomment %}
          {% comment %} <div class="row">
            <div class="col-12">
              <div class="mega-menu-category">
                {% for child in link.links %}
                  <div class="category-group">
                    {% if child.links.size > 0 %}
                      <ul class="list-unstyled child-links">
                        {% for grandchild in child.links %}
                          <li class="mb-2">
                            <a href="{{ grandchild.url }}" class="text-decoration-none">{{ grandchild.title }}</a>
                          </li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </div>
                {% endfor %}
              </div>
            </div>
          </div> {% endcomment %}

          {% comment %} Promotional Banner {% endcomment %}
          {% if current_mega_menu.settings.promo_image != blank %}
            <div class="row mt-4">
              <div class="col-12 px-0">
                <a href="{{ current_mega_menu.settings.promo_link }}" class="text-decoration-none">
                  <div class="ratio ratio-21x9">
                    <img 
                      src="{{ current_mega_menu.settings.promo_image | img_url: 'master' }}"
                      alt="{{ current_mega_menu.settings.promo_text }}"
                      class="object-fit-cover rounded"
                      width="auto"
                      height="auto"
                      loading="lazy"
                    >
                  </div>
                  {% if current_mega_menu.settings.promo_text != blank %}
                    <p class="mt-2 mb-0">{{ current_mega_menu.settings.promo_text }}</p>
                  {% endif %}
                </a>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

{% elsif has_image_links %}
  {% comment %} Rest of the code remains the same {% endcomment %}
  {{ content }}
{% else %}
  {% comment %} Regular Dropdown Menu Implementation {% endcomment %}
  <div aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="as-dropdown-menu regular-dropdown dropdown-menu {{ background_color }}">
    <ul class="list-unstyled mb-0">
      {% for sublink in link.links %}
        <li class="dropdown-item-wrapper">
          {% if sublink.links.size > 0 %}
            <div class="nested-dropdown">
              <div class="d-none d-lg-block d-xl-block">
                <a class="dropdown-item d-flex align-items-center justify-content-between" href="{{ sublink.url }}">
                  {{ sublink.title }}
                  <span class="ms-2">{% render 'icon-chevron-right' %}</span>
                </a>
                <ul class="nested-dropdown-menu list-unstyled">
                  {% for childlink in sublink.links %}
                    <li>
                      <a href="{{ childlink.url }}" class="dropdown-item">{{ childlink.title }}</a>
                    </li>
                  {% endfor %}
                </ul>
              </div>
              <div class="d-block d-lg-none d-xl-none">
                <button type="button" class="dropdown-item d-flex align-items-center justify-content-between w-100 border-0 bg-transparent" data-bs-toggle="collapse" data-bs-target="#submenu-{{ forloop.index }}-{{ sublink.handle }}" aria-expanded="false">
                  {{ sublink.title }}
                  <span class="dropdown-icon">
                    {% render 'icon-chevron-down-header' %}
                  </span>
                </button>
                <div id="submenu-{{ forloop.index }}-{{ sublink.handle }}" class="collapse">
                  <ul class="list-unstyled ps-3 mb-0">
                    {% for childlink in sublink.links %}
                      <li>
                        <a href="{{ childlink.url }}" class="dropdown-item py-2">{{ childlink.title }}</a>
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              </div>
            </div>
          {% else %}
            <a href="{{ sublink.url }}" class="dropdown-item">{{ sublink.title }}</a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}